<template>
  <div class="info-header">
    <div class="info-header-art">
      <div v-for="(item, $index) in val" :class="'item i-' + $index">
        <div class="i-line" :style="rool(item, '-', $index)">
          <div class="line"></div>
          <span class="val" :style="rool(item, '', $index)">{{item}}</span>
        </div>
      </div>
      <div class="art-title">
        <i class="ico"></i>
        <h4 class="tit">口语能力</h4>
      </div>
    </div>
    <ul class="info-header-con">
      <li class="ihc-item">
        <p class="tit blue">{{val[0]}}</p>
        <span class="desc">口语力</span>
      </li>
      <li class="ihc-item vux-1px-l">
        <p class="tit green">{{val[1]}}</p>
        <span class="desc">完整度</span>
      </li>
      <li class="ihc-item vux-1px-l">
        <p class="tit yellow">{{val[2]}}</p>
        <span class="desc">流利度</span>
      </li>
      <li class="ihc-item vux-1px-l">
        <p class="tit red">{{val[3]}}</p>
        <span class="desc">韵律度</span>
      </li>
    </ul>
  </div>
</template>

<script>
  export default{
    props: ['val'],
    methods: {
      rool(v, t, r) {
        let deg = 180 -v/100 * 180;
        if (v !== 0) {
          r == 0 && deg > 175 && (deg = 175)
          r == 1 && deg > 174 && (deg = 174)
          r == 2 && deg > 172 && (deg = 172)
          r == 3 && deg > 169 && (deg = 169)

          r == 0 && deg < 5 && (deg = 5)
          r == 1 && deg < 6 && (deg = 6)
          r == 2 && deg < 8 && (deg = 8)
          r == 3 && deg < 11 && (deg = 11)
        }
        return {
          transform: 'rotate('+ t + deg +'deg)',
          webkitTransform: 'rotate('+ t + deg +'deg)'
        }
      }
    }
  }
</script>

<style lang="less">
  // 圆环套圆环
  .ii(@size, @color) {
    width: @size;
    height: @size;
    .i-line {
      width: @size + 4px;
      height: (@size + 4px)/2;
    }
    .line {
      &:before {
        border-color: @color;
        width: @size;
        height: @size;
      }
    }
    .val {
      background: @color;
    }
  }

  .info-header {
    position: relative;
    height: 260px;
    background: #fff;
    background: linear-gradient(-45deg, #fff, #fff, #fffaf5);
    overflow: hidden;
    margin-bottom: 10px;

    &-art {
      position: absolute;
      width: 100%;
      height: 170px;
      overflow: hidden;
      .art-title {
        position: absolute;
        bottom: -4px;
        left: 50%;
        margin-left: -30px;
        width: 60px;
        text-align: center;
        font-size: 0;
        .ico {
          display: inline-block;
          width: 36px;
          height: 36px;
          background: url(../assets/l.svg);
        }
        .tit {
          font-size: 14px;
          font-weight: 400;
          color: #ff6d00;
        }
      }
    }
    &-con {
      display: table;
      position: absolute;
      bottom: 20px;
      left: 50%;
      width: 90%;
      transform: translate(-50%, 0);
      .ihc-item {
        display: table-cell;
        text-align: center;
        .tit {
          font-size: 20px;
          line-height: 1;
        }
        .desc {
          font-size: 12px;
          color: #999;
        }
      }
    }

    .item {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 50%);
      border-radius: 100%;
      border: 2px solid #d1d1cf;
      .i-line {
        position: absolute;
        top: -2px;
        left: -2px;
        transform-origin: bottom center;
        transform: rotate(0deg);
      }
      .line {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        overflow: hidden;
        &:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          border-radius: 100%;
          border: 2px solid #4ec9d8;
        }
      }
      .val {
        position: absolute;
        display: block;
        right: -10px;
        bottom: -12px;
        font-size: 12px;
        color: #fff;
        background: #4ec9d8;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border-radius: 100%;
        transform: rotate(0deg);
      }
    }

    .i-0 {
      .ii(280px, #4ec9d8);
    }
    .i-1 {
      .ii(230px, #3cc26d);
    }
    .i-2 {
      .ii(180px, #f6bc34);
    }
    .i-3 {
      .ii(130px, #f64d46);
    }

    .blue {
      color: #4ec9d8;
    }
    .green {
      color: #3cc26d;
    }
    .yellow {
      color: #f6bc34;
    }
    .red {
      color: #f64d46;
    }
  }
</style>
